<template>
  <div class="declaration-info-apply-wrap">
    <el-button type="text" @click="prepareToReport">开始填报
    </el-button>
    <!-- 填报之前是否准备好材料提示 -->
    <transition>
      <!-- :show-close="false" -->
      <el-dialog :visible.sync="dialogVisible" width="30%" center append-to-body
        custom-class="declaration-info-report-dialog">
        <div slot="title" class="dialog-header-title">
          <i class="el-icon-warning-outline"></i>
          提示
        </div>
        <div class="dialog-body">
          <span class="report-tip">请保证上传资料的准确性，若材料不符合规定</span>
          <span class="report-tip">将自动取消申报资格</span>
          <!-- <span class="report-tip">
            <a href="http://www.baidu.com">《浙江省未来工厂填报相关规定》</a>
          </span> -->

          <el-checkbox-group v-model="checkList">
            <el-checkbox label="prepared">我已准备好材料已开启填报</el-checkbox>
            <!-- <el-checkbox label="followed">加入关注，便于查看申报进度
            </el-checkbox> -->
          </el-checkbox-group>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" style="padding: 10px 50px" :disabled="!canGotoSubmit"
            @click="gotoReport($router, $route)">开始填报
          </el-button>
        </span>
      </el-dialog>
    </transition>
  </div>
</template>

<script setup>
import { ref, /* reactive,  */ computed, watch } from 'vue';
import { Message } from 'element-ui';
import { FOLLOW_STATUS } from '@/utils/enum';
import { setSessionItem } from '@/utils/global';
import { /* DECLARATION_NOTICE_CURRENT */ NOTICE_PROCESS_CURRENT } from '../const';

const props = defineProps({
  followStatus: Number,
  noticeInfo: Object,
  processInfo: Object,
});

const emit = defineEmits('follow');

/* const page = reactive({
  pageNo: 1,
  pageSize: 9,
}); */

const dialogVisible = ref(false);
// const canApply = ref(true);
const checkList = ref([]);

watch(
  () => props.followStatus,
  (status) => {
    const idx = checkList.value.indexOf('followed');
    if (status == FOLLOW_STATUS.YES && idx === -1) {
      checkList.value.push('followed');
    }
    if (status == FOLLOW_STATUS.NO && idx !== -1) {
      checkList.value.splice(idx, 1);
    }
  },
);

const canApply = computed(
  () => {
    const endTime = props.noticeInfo.endTime;
    return new Date(endTime) && new Date(endTime).getTime() > Date.now();
  },
);

const canGotoSubmit = computed(() => checkList.value.includes('prepared'));

function prepareToReport() {
  if (canApply.value) {
    dialogVisible.value = true;
    // Message.error('正在开发中');
  } else {
    Message.error('已经截止了，不能申报了');
  }
}

function gotoReport(router, route) {
  const currFollowStatus = checkList.value.includes('followed')
    ? FOLLOW_STATUS.YES
    : FOLLOW_STATUS.NO;
  // 如果当前关注状态和之前的关注状态一样，则不需要重新设置
  if (currFollowStatus !== props.followStatus) {
    emit('follow', currFollowStatus);
  }
  // 保存通知信息，用于填报
  // setSessionItem(DECLARATION_NOTICE_CURRENT, props.noticeInfo || {});
  setSessionItem(NOTICE_PROCESS_CURRENT, props.processInfo);
  router.push({
    path: '/home/declaration',
    query: {
      ...route.query,
      processDefinitionId: props.processInfo.processDefinitionId,
    },
  });
}
</script>

<style lang="scss">
@import '@/config/theme/ele-variables.scss';

/* .declaration-info-apply-wrap {
} */
.declaration-info-report-dialog {
  .dialog-header-title {
    font-size: 18px;
    font-weight: 500;
  }

  .dialog-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .report-tip {
      padding: 10px 0;
      font-size: 14px;
      font-weight: 400;
      color: #666666;

      &:nth-child(2) {
        padding: 0;
        padding-bottom: 10px;
      }

      &:nth-child(3) {
        color: #409eff;
      }
    }

    .el-checkbox {
      width: 220px;
      display: block;
      margin-top: 20px;
    }
  }
}
</style>
